<template>
	<section class="flex flex-col gap-y-2 h-[calc(100vh-48px)] px-4 py-2">
		<slot name="back">
			<div class="flex items-center sticky top-2 bg-white rounded-md px-4 py-3 gap-x-2 z-[1000]" v-if="backText">
				<div class="bg-primary rounded-full w-5 h-5 flex items-center justify-center cursor-pointer" @click="handleBack">
					<el-icon size="18" color="#fff"><Back /></el-icon>
				</div>
				<span class="text-base font-bold text-[#000]">{{ backText }}</span>
			</div>
		</slot>
		<slot />
		<div class="relative flex-1 custom__table__fixed__page overflow-y-hidden bg-white pt-5 px-5" v-if="!hiddenPage">
			<slot name="table" />
			<el-pagination
				small
				background
				v-model:current-page="page.currentPage"
				v-model:page-size="page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="page.total"
				@current-change="currentChange"
				@size-change="sizeChange"
			/>
		</div>
	</section>
</template>

<script setup lang="ts">
withDefaults(
	defineProps<{
		backText?: string;
		hiddenPage?: boolean;
	}>(),
	{}
);

const page = defineModel('page', {
	default: {
		currentPage: 1,
		pageSize: 30,
		total: 0,
	},
});
/*  watchEffect(() => {
    if (!page.value.pageSize) {
      page.value.pageSize = 30
    }
  })*/
const emits = defineEmits(['currentChange', 'sizeChange']);
const router = useRouter();

function handleBack() {
	router.back();
}
function currentChange() {
	emits('currentChange', unref(page).currentPage);
}
function sizeChange() {
	emits('sizeChange', unref(page).pageSize);
}
</script>

<style scoped></style>
